<?php
use yii\helpers\Url;

?>
<style>
    .debtstatistics{
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }

    .debtstatistics li{position: relative;float: left;width: 310px;height: 109px;border: 1px solid #e5e5e5;margin-right: 42px;cursor: pointer;overflow: hidden;}

    .debtstatistics li .box_bg{
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #FFF0F4;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: 50%;
        transform-origin: 50%;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }

    .debtstatistics li:last-child{margin-right: 0;}
    .debtstatistics li .pics{position: absolute;left: 30px;top: 15px;width: 77px;height: 77px;border-radius: 50%;}
    .debtstatistics li .pics.pic1{background: #ff5792 url("<?= Yii::getAlias('@web/backend/img/financial/debtstatistics/arrears_ico.png') ?>") center center no-repeat;}
    .debtstatistics li .pics.pic2{background: #ff6182 url("<?= Yii::getAlias('@web/backend/img/financial/debtstatistics/value.png') ?>") center center no-repeat;}
    .debtstatistics li .pics.pic3{background: #fe6b75 url("<?= Yii::getAlias('@web/backend/img/financial/debtstatistics/give.png') ?>") center center no-repeat;}
    .debtstatistics li .pics.pic4{background: #ff8e67 url("<?= Yii::getAlias('@web/backend/img/financial/debtstatistics/balance.png') ?>") center center no-repeat;}
    .debtstatistics li .con{position:absolute; right:0; top:20px;padding-right: 20px;}
    .debtstatistics li .con .title{font-size: 18px;}
    .debtstatistics li .con .money{font-size: 15px;color: #c3a279;}

    .debtstatistics li:hover .box_bg{
        transform: scale(1);
    }

    @media (max-width: 1280px){
        .debtstatistics li .pics{left: 10px;}
    }
</style>
        <?=$this->render('../_nav');?>
<div class="row borB">
    <div class="container">
<ul id="myTab" class="nav nav-tabs mt10 smNav">
        <li <?php if(Yii::$app->request->get('action') == 'debtstatistics'):?> class="active" <?php endif?>><a href="<?=Url::toRoute(['financial/cashier','action'=>'debtstatistics'])?>" >余额欠款</a></li>
        <li <?php if(Yii::$app->request->get('action') == 'debtlist'):?> class="active" <?php endif?>><a href="<?=Url::toRoute(['financial/cashier','action'=>'debtlist'])?>" >欠款明细</a></li>
</ul>
    </div>
</div>
<div class="container mt20">
    <!--欠款合计：<?=$info['debt_count']?>
    储值卡余额：<?=$info['balance_count']?>
    赠送金余额：<?=$info['give_balance_count']?>-->
    <ul class="debtstatistics clearfix">
        <li>
            <div class="box_bg"></div>
            <div class="pics pic1"></div>
            <div class="con">
                <div class="title">储值卡余额</div>
                <div class="money"><?=$info['debt_count']?></div>
            </div>
        </li>
        <li>
            <div class="box_bg"></div>
            <div class="pics pic2"></div>
            <div class="con">
                <div class="title">储值卡余额</div>
                <div class="money"><?=$info['balance_count']?></div>
            </div>
        </li>
        <li>
            <div class="box_bg"></div>
            <div class="pics pic3"></div>
            <div class="con">
                <div class="title">赠送金余额</div>
                <div class="money"><?=$info['give_balance_count']?></div>
            </div>
        </li>
        <li>
            <div class="box_bg"></div>
            <div class="pics pic4"></div>
            <div class="con">
                <div class="title">疗程卡余额</div>
                <div class="money"><?=sprintf("%.2f", $info['card_count']);?></div>
            </div>
        </li>
    </ul>
</div>


